<template>
  <div id="articles-pane" class="articles-pane">
    <el-container>
      <el-header class="title-pane" height="50px">
        <span class="title">我的文章</span>
        <span class="right">
          <el-divider direction="vertical"></el-divider>按时间排序
          <ri i="sort" title="排序"></ri>
        </span>
        <span class="right">
          <el-button type="primary" size="small" icon="el-icon-edit" @click="goEdit">写文章</el-button>
        </span>
      </el-header>
      <el-main class="article-list-pane">
        <scroller>
          <div class="article-list-vbar">
            <div class="article-list">
            <div class="article-item-wrap" v-for="(m, i) in articles" :key="i">
              <mat-card :mat="m" :number="i"></mat-card>
            </div>
            </div>
          </div>
        </scroller>
      </el-main>
    </el-container>

    <div></div>
  </div>
</template>

<script>
import MatCard from "../mats/MatCard.vue";
export default {
  components: {
    MatCard
  },
  data() {
    return {
      articles: []
    };
  },
  created() {
    this.$store.dispatch("setActiveWorksMenu", "/works/articles");
    this.authGet("/api/v1/mats/articles/mine").then(res => {
      this.articles = res.data.mats;
    });
  },
  methods: {
    goEdit() {
      this.$router.push("/works/edit");
    },
    articleRemoved(artid) {
      this.articles = this.articles.filter(a => a.id != artid);
    }
  }
};
</script>

<style lang="stylus">
.articles-pane
  text-align left
  padding 0

  .title-pane
    border-bottom 1px solid #eee
    height 50px
    line-height 50px

    span.title
      font-weight bold
      font-size 1.2em

    span.right
      float right

  .article-list-pane
    padding 20px 0 20px 20px

    .article-list-vbar
      max-height 81vh

      .article-list
        padding-right 20px
</style>